<template>
  <div
    :class="vertical?'mind-bar':'mind-bar2'"
    style="width:100%"
  >
    <div
      v-for="(item, index) in dataArray"
      :key="index"
      :class="vertical?'mind-outsidebar':'mind-outsidebar2'"
    >
      <div
        :class="vertical?'mind-insidebar':'mind-insidebar2'"
        :style="vertical?('margin-left:'+betweenSpace+'px;margin-right:'+betweenSpace+'px;'):('margin-top:'+betweenSpace+'px;margin-bottom:'+betweenSpace+'px;')"
      >
        <slot
          name="一级"
          :item="item"
          :index="index"
        ></slot>
      </div>
      <div
        v-if="item.array&&item.array.length>1"
        :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
      />
      <div
        v-if="item.array&&item.array.length>1"
        class="mind-line"
        :style="'left:'+item.left+'px;top:'+item.top+'px;width:'+item.width+'px;height:'+item.height+'px;background-color:'+lineColor"
      />
      <!-- 二级 -->
      <div :class="vertical?'mind-bar':'mind-bar2'">
        <div
          v-for="(item2, index2) in item.array"
          :key="index2"
          :class="vertical?'mind-outsidebar':'mind-outsidebar2'"
        >
          <div
            :class="vertical?'mind-insidebar':'mind-insidebar2'"
            :style="vertical?('margin-left:'+betweenSpace+'px;margin-right:'+betweenSpace+'px;'):('margin-top:'+betweenSpace+'px;margin-bottom:'+betweenSpace+'px;')"
          >
            <div
              :id="item2[mindId]"
              :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
            />
            <slot
              name="二级"
              :item="item2"
              :index="index2"
            ></slot>
          </div>
          <div
            v-if="item2.array&&item2.array.length>1"
            :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
          />
          <div
            v-if="item2.array&&item2.array.length>1"
            class="mind-line"
            :style="'left:'+item2.left+'px;top:'+item2.top+'px;width:'+item2.width+'px;height:'+item2.height+'px;background-color:'+lineColor"
          ></div>
          <!-- 三级 -->
          <div :class="vertical?'mind-bar':'mind-bar2'">
            <div
              v-for="(item3, index3) in item2.array"
              :key="index3"
              :class="vertical?'mind-outsidebar':'mind-outsidebar2'"
            >
              <div
                :class="vertical?'mind-insidebar':'mind-insidebar2'"
                :style="vertical?('margin-left:'+betweenSpace+'px;margin-right:'+betweenSpace+'px;'):('margin-top:'+betweenSpace+'px;margin-bottom:'+betweenSpace+'px;')"
              >
                <div
                  :id="item3[mindId]"
                  :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
                />
                <slot
                  name="三级"
                  :item="item3"
                  :index="index3"
                ></slot>
              </div>
              <div
                v-if="item3.array&&item3.array.length>1"
                :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
              />
              <div
                v-if="item3.array&&item3.array.length>1"
                class="mind-line"
                :style="'left:'+item3.left+'px;top:'+item3.top+'px;width:'+item3.width+'px;height:'+item3.height+'px;background-color:'+lineColor"
              >
              </div>
              <!-- 四级 -->
              <div :class="vertical?'mind-bar':'mind-bar2'">
                <div
                  v-for="(item4, index4) in item3.array"
                  :key="index4"
                  :class="vertical?'mind-outsidebar':'mind-outsidebar2'"
                >
                  <div
                    :class="vertical?'mind-insidebar':'mind-insidebar2'"
                    :style="vertical?('margin-left:'+betweenSpace+'px;margin-right:'+betweenSpace+'px;'):('margin-top:'+betweenSpace+'px;margin-bottom:'+betweenSpace+'px;')"
                  >
                    <div
                      :id="item4[mindId]"
                      :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
                    />
                    <slot
                      name="四级"
                      :item="item4"
                      :index="index4"
                    ></slot>
                  </div>
                  <div
                    v-if="item4.array&&item4.array.length>1"
                    :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
                  />
                  <div
                    v-if="item4.array&&item4.array.length>1"
                    class="mind-line"
                    :style="'left:'+item4.left+'px;top:'+item4.top+'px;width:'+item4.width+'px;height:'+item4.height+'px;background-color:'+lineColor"
                  >
                  </div>
                  <!-- 五级 -->
                  <div :class="vertical?'mind-bar':'mind-bar2'">
                    <div
                      v-for="(item5, index5) in item4.array"
                      :key="index5"
                      :class="vertical?'mind-outsidebar':'mind-outsidebar2'"
                    >
                      <div
                        :class="vertical?'mind-insidebar':'mind-insidebar2'"
                        :style="vertical?('margin-left:'+betweenSpace+'px;margin-right:'+betweenSpace+'px;'):('margin-top:'+betweenSpace+'px;margin-bottom:'+betweenSpace+'px;')"
                      >
                        <div
                          :id="item5[mindId]"
                          :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
                        />
                        <slot
                          name="五级"
                          :item="item5"
                          :index="index5"
                        ></slot>
                      </div>
                      <div
                        v-if="item5.array&&item5.array.length>1"
                        :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
                      />
                      <div
                        v-if="item5.array&&item5.array.length>1"
                        class="mind-line"
                        :style="'left:'+item5.left+'px;top:'+item5.top+'px;width:'+item5.width+'px;height:'+item5.height+'px;background-color:'+lineColor"
                      >
                      </div>
                      <!-- 六级 -->
                      <div :class="vertical?'mind-bar':'mind-bar2'">
                        <div
                          v-for="(item6, index6) in item5.array"
                          :key="index6"
                          :class="vertical?'mind-outsidebar':'mind-outsidebar2'"
                        >
                          <div
                            :class="vertical?'mind-insidebar':'mind-insidebar2'"
                            :style="vertical?('margin-left:'+betweenSpace+'px;margin-right:'+betweenSpace+'px;'):('margin-top:'+betweenSpace+'px;margin-bottom:'+betweenSpace+'px;')"
                          >
                            <div
                              :id="item6[mindId]"
                              :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
                            />
                            <slot
                              name="六级"
                              :item="item6"
                              :index="index6"
                            ></slot>
                          </div>
                          <div
                            v-if="item6.array&&item6.array.length>1"
                            :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
                          />
                          <div
                            v-if="item6.array&&item6.array.length>1"
                            class="mind-line"
                            :style="'left:'+item6.left+'px;top:'+item6.top+'px;width:'+item6.width+'px;height:'+item6.height+'px;background-color:'+lineColor"
                          >
                          </div>
                          <!-- 七级 -->
                          <div :class="vertical?'mind-bar':'mind-bar2'">
                            <div
                              v-for="(item7, index7) in item6.array"
                              :key="index7"
                              :class="vertical?'mind-outsidebar':'mind-outsidebar2'"
                            >
                              <div
                                :class="vertical?'mind-insidebar':'mind-insidebar2'"
                                :style="vertical?('margin-left:'+betweenSpace+'px;margin-right:'+betweenSpace+'px;'):('margin-top:'+betweenSpace+'px;margin-bottom:'+betweenSpace+'px;')"
                              >
                                <div
                                  :id="item7[mindId]"
                                  :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
                                />
                                <slot
                                  name="七级"
                                  :item="item7"
                                  :index="index7"
                                ></slot>
                              </div>
                              <!-- <div
                                v-if="item7.array&&item7.array.length>1"
                                :style="'width:'+lineWidth+'px;height:'+lineHeight+'px;background-color:'+lineColor"
                              />
                              <div
                                v-if="item7.array&&item7.array.length>1"
                                class="mind-line"
                                :style="'left:'+item7.left+'px;top:'+item7.top+'px;width:'+item7.width+'px;height:'+item7.height+'px;background-color:'+lineColor"
                              ></div>-->
                              <!-- 八级 -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"mm-mind",
  props: {
    data: {// 一维数组
      type: Array,
      default: null
    },

    rootId: {// 顶层item的父类Id的值
      type: String,
      default: "0"
    },

    mindId: {// item的Id属性名称
      type: String,
      default: "id"
    },

    mindParentId: {// item的父类Id属性名称
      type: String,
      default: "parentId"
    },

    vertical: {// 是否是垂直方向
      type: Boolean,
      default: true
    },

    betweenSpace: {// item之间的距离
      type: Number,
      default: 10
    },

    lineColor: {// 连接线的颜色
      type: String,
      default: "#000"
    },

    lineWidth: {// 连接线的宽度
      type: Number,
      default: 1
    },

    lineHeight: {// 连接线的高度
      type: Number,
      default: 30
    }
  },

  data() {
    return {
      dataArray: [],
      contactArray: []
    }
  },

  watch: {
    data() {
      this.dataArray = this.getDataArray(this.data, this.rootId);
    },
  },

  mounted() {
    this.dataArray = this.getDataArray(this.data, this.rootId);
    let self = this;
    window.onresize = function () {
      self.updateView();
    };
  },

  destroyed() {
    window.onresize = null;
  },

  updated() {
    this.updateView();
  },

  methods: {
    updateView() {
      let hasChange = false;
      for (let i = 0; i < this.contactArray.length; i++) {
        let item = this.contactArray[i];
        if (item.array && item.array.length > 1) {
          let start = document.getElementById(item.array[0][this.mindId]);
          if (!start) {
            continue;
          }
          let end = document.getElementById(item.array[item.array.length - 1][this.mindId]);
          if (!end) {
            continue;
          }
          if (!start.offsetTop || !start.offsetLeft || !end.offsetTop || !end.offsetLeft) {
            continue;
          }
          let left = start.offsetLeft;
          let top = start.offsetTop;
          let width, height;
          if (this.vertical) {
            width = end.offsetLeft - start.offsetLeft + this.lineWidth;
            height = this.lineWidth;
          } else {
            width = this.lineHeight;
            height = end.offsetTop - start.offsetTop;
          }
          if (left != item.left) {
            item.left = left;
            hasChange = true;
          }
          if (top != item.top) {
            item.top = top;
            hasChange = true;
          }
          if (width != item.width) {
            item.width = width;
            hasChange = true;
          }
          if (height != item.height) {
            item.height = height;
            hasChange = true;
          }
        }
      }
      if (hasChange) {
        this.dataArray = [].concat(this.dataArray);
      }
    },

    getDataArray(array, rootId) {
      this.contactArray = [];
      if (!array || array.length < 1) {
        return [];
      }
      let map = new Map();
      for (let i = 0; i < array.length; i++) {
        let item = array[i];
        let mapArray = map.get(item[this.mindParentId]);
        if (!mapArray) {
          mapArray = [];
          map.set(item[this.mindParentId], mapArray);
        }
        mapArray.push(item);
      }
      let dataArray = map.get(rootId);
      if (dataArray) {
        this.setupData(map, dataArray);
      } else {
        dataArray = [];
      }
      map.clear();
      return dataArray;
    },

    setupData(map, array) {
      for (let i = 0; i < array.length; i++) {
        let item = array[i];
        let subArray = map.get(item[this.mindId]);
        if (subArray) {
          item.array = subArray;
          map.delete(item[this.mindId]);
          this.contactArray.push(item);
          this.setupData(map, subArray);
        }
      }
    }
  }
}
</script>

<style scoped>
.mind-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.mind-outsidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mind-insidebar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mind-line {
  position: absolute;
}

.mind-bar2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mind-outsidebar2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.mind-insidebar2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>